$mainColor:#23a8f5;
@mixin text_overflow($max) {
  display: -webkit-box; 
  display: -moz-box;
  -webkit-box-orient: vertical; 
  -moz-box-orient: vertical;
  -webkit-line-clamp: $max;
  -moz-line-clamp: $max;
  overflow: hidden;
}
/******************************************************
 * modal start
 ******************************************************/

.modal.fade .modal-dialog{
    width:100%;
    height:100%;
    margin-top:0;
}

@media (min-width: 768px){
    .modal-dialog {
        margin:0;
    }
}

.modal-content{
    width:721px;
    margin:0 auto;
    border-radius:4px; 
    overflow:hidden;
    position:relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.modal-header{
    height:60px;
    padding-top:18px;
    box-sizing:border-box;
    background-color:#f1f1f1;
}

.modal-body{
    padding-top:30px;
    padding-bottom:20px;
    .bd-box{
        width:500px;
        margin-left:auto;
        margin-right:auto;
        box-sizing:border-box;
    }
    .folder_label{
      float: left;
      width: 80px;
      height: 50px;
      line-height: 50px;
      font-weight: normal;
    }
    #editArea{
      float: left;
      width: 380px;
      height: 50px;
      line-height: 50px;
      outline: none;
      margin-left: 10px;
    }
}
.folder_body{
  width: 500px;
  margin:0 auto;
}
.modal-footer{
    border-top:0;
    padding-top:0;
    padding-bottom:40px;
    text-align:center;
    
    p{margin:0;}
    
    .cancel{
        width:140px;
        height:50px;
        line-height:50px;
        padding:0; 
        border:0; 
        background-color:#f1f1f1; 
        border-radius:2px;
    }
    
    .btn+.btn {margin-left:20px;}
    .confirm{
        width:200px;
        height:50px;
        line-height:50px;
        padding:0;
        border:0; 
        border-radius:2px; 
        background-color:#23a8f5;
    }
}
.fileList{
  margin:20px auto;
  width: 1500/1680 * 100%;
  border:1px solid #e9ecef;
  background:#fff;
}
.fileRow{
  ul{
    margin:0;    
    padding:0;
  }
  li{
    overflow: hidden;
    padding:10px 35/1500 * 100%;
    list-style: none;
    //cursor: pointer;
    margin:0;
    background:#fff;
    border-bottom: 1px solid #e9ecef;
    &:last-child{border-bottom: none;}
    &:hover{
      background:#f5f8f9;
    }
  }
  .rfileName{
    float: left;
    height: 30px;
    line-height: 30px;
    &:hover{
      span{
        color: $mainColor;
      }
    }
    i{
      color: $mainColor;
      vertical-align: middle;
      font-size: 18px;
    }
    span{
      color: #333;
      margin-left: 15px;
    }
  }
  .rfileNum,.rfileTime,.rfileBtn{
    float: right;    
    height: 30px;
    line-height: 30px;
  }
  .rfileNum{
    margin-right: 175/1500 * 100%;
    color: #333;
  }
  .rfileTime{
    margin-right: 175/1500 * 100%;
    color: #999;
  }
  .rfileBtn{
    float: right;
    i{
      float: right;
      margin-left: 15px;
      cursor: pointer;
      vertical-align: middle;
    }
  }
}
.creatBar{
  padding:10px 35/1500 * 100%;
  overflow: hidden;
  display: none;
  background:#f5f8f9;
  border-bottom: 1px solid #e9ecef;
  .cwrap{
    height: 30px;
    line-height: 30px;
    overflow: hidden;
  }
  .cfileBtn{
    float: right;
    i{
      float: right;
      margin-left: 15px;
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .cfileName{
    float: left;
    i{
      color: $mainColor;
      vertical-align: middle;
      font-size: 18px;
    }
    input{
      border: 1px solid #ddd;
      padding:0 13px;
      border-radius: 3px;
      margin-left: 15px;
      padding-right: 30px;
      background:transparent;
      height: 30px;
      line-height: 30px;
      outline: none;
      &:active{border:1px solid #ddd;}
      &:focus{border:1px solid #ddd;}
      &:visited{border:1px solid #ddd;}
    }
  }
}
.fileBar{
  padding:10px 35/1500 * 100%;
  overflow: hidden;
  border-bottom: 1px solid #e9ecef;
  h3{
    font-size: 16px;
    padding:0;margin:0;
    color: #000;
    float: left;
    height: 30px;
    line-height: 30px;
  }
  .barRight{
    float: right;
    height: 30px;
    overflow: hidden;
    .barBtn{
      float: right;
      cursor: pointer;
      line-height: 30px;
      height: 30px;
      color: $mainColor;
      margin-left: 30px;
      i{vertical-align: middle;}
    }
    input{
      border: 1px solid $mainColor;
      float: right;
      padding:0 13px;
      border-radius: 3px;
      padding-right: 30px;
      height: 30px;
      line-height: 30px;
      outline: none;
      &:active{border:1px solid $mainColor;}
      &:focus{border:1px solid $mainColor;}
    }
    .fileSearch{
      position: relative;
      color: $mainColor;
      vertical-align: middle;
      float: right;
      cursor: pointer;
      i{
        position: absolute;
        right: 10px;
        top: 5px;
      }
    }
  }
}

.modal.in .modal-dialog{
    -webkit-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    transform: translate(0,50%);
}
#editArea{
  padding:5px 10px;
  border:1px solid #ddd;
  width: 100%;
}
.cYesBtn{
  background:$mainColor;
  float: left;
  color: #fff;
  text-align: center;
  padding:0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  display: block;
  margin-right: 15px;  
  cursor: pointer;
}

.cNoBtn{
  background:#999;
  float: left;
  color: #fff;
  text-align: center;
  padding:0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  cursor: pointer;
  display: block;  
}

.regular-checkbox {
  display: none;
}
.regular-checkbox + label {
  background-color: #fff;
  border: 1px solid #cacece;
  margin-right: 15px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
  background-color: #fff;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
  color: #99a1a7;
  vertical-align: middle;
}

.regular-checkbox:checked + label:after {
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: -5px;
  left: 3px;
  color: #999;
}
.fileDetailRow{
  .rfileName{
    width: 345/1500 * 100%;
    @include text_overflow(1);
  }
  .rfileTime{
    width: 300/1500 * 100%;
    margin-right: 0;
    float: left;
    @include text_overflow(1);
  }
  .rfileSize{
    float: left;
    height: 30px;
    width: 230/1500 * 100%;
    line-height: 30px;
    @include text_overflow(1);
  }
}
.bread{
  margin:0;
  padding:0;
  list-style: none;
  li{
    float: left;
    display: inline-block;
    &:before{
      padding: 0 5px;
      color: #ccc;
      content: "/\00a0";
    }
    a{
      color: #363f44;
      cursor: pointer;
    }
  }
  
  li.tap{
      &,a{color:$mainColor;}
      &:before{
        display: none;
        //content:"";
      }
    }
}
.bg-clear img {
    margin-top: 20px;
}

.bg-clear p {
    margin-top: 60px;
    margin-bottom: 40px;
}